<template>
  <div class="tab-title-page">
    <div class="common_form_search">
      <el-form
        ref="searchForm"
        :inline="true"
        :model="searchForm"
      >
        <el-form-item label="订单号">
          <el-input
            style="width:220px"
            v-model="searchForm.orderNo"
            placeholder="请输入订单号"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="资金流向">
          <el-select
            v-model="searchForm.moneyFlow"
            placeholder="请选择"
            clearable
          >
            <el-option
              label="收入"
              :value="1"
            ></el-option>
            <el-option
              label="支出"
              :value="2"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="类型">
          <el-select
            v-model="searchForm.flowType"
            placeholder="请选择"
            clearable
          >
            <el-option
              v-for="item in typeList"
              :key="item.id"
              :label="item.label"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="入账时间">
          <my-date-picker ref="myDatePicker"></my-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button
            size="small"
            type="primary"
            @click="search()"
          >查询</el-button>
          <el-button
            size="small"
            @click="reset()"
          >重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-divider class="middle_divider"></el-divider>
    <div class="child_page">
      <div class="search_total">
        <div class="flex data_grid">
          <p class="flex-1"><span class="color-999">供应商总金额（元）</span><br /><span>{{amount}}</span></p>
          <p class="flex-1"><span class="color-999">手续费总额（元）</span><br /><span>{{service_fee}}</span></p>
          <p class="flex-1"><span class="color-999">提现总额（元）</span><br /><span>{{withdrawal}}</span></p>
          <p class="flex-1"><span class="color-999">充值总额（元）</span><br /><span>{{charge}}</span></p>
        </div>
        <p class="color-999 text-center">查询时间：{{searchForm.createTime?searchForm.createTime:'全部'}}</p>
      </div>
      <div class="flex align-center table-top-btns">
        <h5 class="flex align-center">
          <svg-icon
            style="margin-right:15px"
            icon-class="list"
            :size="15"
          />数据列表
        </h5>
        <el-button
          v-if="$hasMethod('#export')"
          size="small"
          icon="el-icon-upload2"
          class="export-btn"
          @click="exportFile"
        >导出</el-button>
      </div>
      <el-table
        border
        :data="tableData"
      >
        <el-table-column
          fixed
          width="60"
          align="center"
          prop="trans_id"
          label="ID"
        />
        <el-table-column
          align="center"
          label="账户类型"
          width="80"
        >
          <span>租金账户</span>
        </el-table-column>
        <el-table-column
          align="center"
          prop="before_balance"
          label="交易前余额（元）"
        />
        <el-table-column
          align="center"
          label="手续费金额（元）"
        >
          <template slot-scope="scope">
            <span
              @click="openFeeDialog(scope.row)"
              :class="{'underline_text':scope.row.service_fee>0,'pointer':scope.row.service_fee>0}"
            >{{scope.row.service_fee?scope.row.service_fee:'--'}}</span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="金额（元）"
        >
          <template slot-scope="scope">
            <span
              v-if="scope.row.amount>0"
              class="green-font"
            >+{{scope.row.amount}}</span>
            <span
              v-else
              class="red-font"
            >{{scope.row.amount}}</span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="after_balance"
          label="交易后余额（元）"
        />
        <el-table-column
          align="center"
          label="类型"
          width="80"
        >
          <template slot-scope="scope">
            <span>{{scope.row.trans_type_name}}</span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="create_time"
          label="入账时间"
          width="100"
        />
        <el-table-column
          align="center"
          label="订单号"
        >
          <template slot-scope="scope">
            <span
              class="blue-font pointer"
              @click="goToOrder(scope.row.trade_no)"
            >{{scope.row.trade_no}}</span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="remarks"
          label="交易说明"
        />
      </el-table>
      <custom-page
        ref="customPage"
        :total="total"
        @getList="getList"
      ></custom-page>
    </div>
    <fee-dialog
      ref="feeDialog"
      :view-item="viewItem"
    ></fee-dialog>
  </div>
</template>

<script>
import customPage from "@/components/customPage";
import myDatePicker from "@/components/myDatePicker";
import { reconciliationFlow, reconciliationExport } from "@/api/finance";
import feeDialog from "./feeDialog";
export default {
  components: { customPage, myDatePicker, feeDialog },
  data() {
    return {
      searchForm: {
        orderNo: '',
        moneyFlow: '',
        flowType: '',
        createTime: ''
      },
      typeList: [
        { id: 1, label: '结算' },
        { id: 2, label: '退款' },
        { id: 3, label: '充值' },
        { id: 4, label: '买断结算' },
        { id: 6, label: '提现' },
        { id: 7, label: '增值服务业务充值' },
      ],
      tableData: [],
      total: 0,
      amount: 0,
      service_fee: 0,
      withdrawal: 0,
      charge: 0,
      viewItem: {}
    }
  },
  methods: {
    openFeeDialog(item) {
      if (item.service_fee > 0) {
        this.viewItem = item;
        this.$refs.feeDialog.dialogVisible = true;
      }
    },
    goToOrder(orderId) {
      if (orderId) {
        this.$router.push({ name: 'orderList', params: { orderId } });
      }
    },
    getTypeName(id) {
      const obj = this.typeList.find(k => k.id == id);
      return obj ? obj.label : ''
    },
    // 获取数据
    getList() {
      // flag为true, 则不刷新表格
      const { page, pageSize } = this.$refs.customPage;
      reconciliationFlow({
        page,
        pageSize,
        ...this.searchForm
      }).then(res => {
        const { list: { data, total }, count: { amount, service_fee, withdrawal, charge } } = res;
        this.tableData = data || [];
        this.total = total || 0;
        this.amount = parseFloat(amount) ? parseFloat(amount).toFixed(2) : '0.00';
        this.service_fee = parseFloat(service_fee) ? parseFloat(service_fee).toFixed(2) : '0.00';
        this.withdrawal = parseFloat(withdrawal).toFixed(2) || 0;
        this.charge = parseFloat(charge).toFixed(2) || 0;
      })
    },
    // 查询
    search() {
      const pickerVal = this.$refs.myDatePicker.getVal();
      if (pickerVal !== 'error') {
        this.searchForm.createTime = pickerVal;
        this.$refs.customPage.page = 1;
        this.getList();
      }
    },
    // 重置
    reset() {
      if (this.$refs.myDatePicker) {
        this.$refs.myDatePicker.reset();
      }
      this.searchForm = {
        orderNo: '',
        moneyFlow: '',
        flowType: '',
        createTime: ''
      };
      this.getList();
    },
    // 导出
    exportFile() {
      const pickerVal = this.$refs.myDatePicker.getVal();
      if (pickerVal !== 'error') {
        this.searchForm.createTime = pickerVal;
        reconciliationExport(this.searchForm);
      }
    },
  },
  mounted() {
    this.getList();
  }
}
</script>
<style lang="scss" scoped>
.search_total {
  padding: 0 30px;
  border: 1px solid #eeeeee;
  margin-bottom: 20px;
  p,
  span {
    line-height: 23px;
  }
  & > p {
    padding: 10px 0;
  }
}
.data_grid {
  border-bottom: 1px solid #eeeeee;
  p {
    padding: 20px 0;
    text-align: center;
    &:not(:first-child) {
      border-left: 1px solid #eeeeee;
    }
    span:last-child {
      font-size: 30px;
      line-height: 40px;
    }
  }
}
.underline_text {
  text-decoration: underline;
}
.common_form_search {
  padding: 15px 15px 0 15px;
  border-radius: 0 0 10px 10px;
  background-color: #ffffff;
}
.child_page {
  padding: 15px;
}
</style>